<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="date">
      <div class="TimeDisplay">
        <!-- <TimeDisplay></TimeDisplay> -->
        <a-month-picker v-model:value="value" class="picker" placeholder="请选择月份" />
      </div>
      <div class="box">
        <div class="echarts">
          <dv-border-box12>
            <h3>月度饲料消耗</h3>
            <material></material>
          </dv-border-box12>
        </div>

        <div class="echarts">
          <dv-border-box12>
            <h3>月度药品消耗</h3>
            <restoratives></restoratives>
          </dv-border-box12>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
// import TimeDisplay from "..//Middle/currentTime.vue";
import material from '../Month/Echarts/material.vue'
import restoratives from '../Month/Echarts/restoratives.vue'
import { ref } from 'vue'

const value = ref('')
console.log(value);


</script>
  
<style scoped lang="less">
.date {
  width: 100%;
  height: 100%;
}

.TimeDisplay {
  width: 80%;
  height: 7vh;
  border: none;
  text-align: center;
  font-weight: bold;
  margin-top: 2vh;
  /* background: pink; */
  margin-left: 6vw;
}

.picker {
  width: 40%;
  height: 65%;
  margin-right: 1vw;
  /* margin-top: 1vh; */
  background: linear-gradient(to bottom,#00183e,#002d5b);
  border: none;
}

.box {
  width: 60vw;
  height: 75vh;
  margin-left: 2vw;
  /* background: pink; */
}

.echarts {
  width: 40vw;
  height: 35vh;
  margin-left: 3vw;
  padding-top: 8vh;
}

.echarts h3 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}
::v-deep{
  .ant-picker .ant-picker-input >input{
    color:#fff!important;
    &::placeholder{
      color: #fff!important;
    }
    
  }
}

</style>